import React from "react";
import { Card, Table, Modal, Button, message } from "antd";
import axios from "../../utils/axios";
import util from "../../utils/util";

export default class Basic extends React.Component {
  state = {
    dataSource: [],
    dataSource2: [],

    selectedRowKeys: [],
    selectedItem: {},
    selectedRowKeys1: [],
    selectedRows1: [],

  };

  params = {
    page: 1
  }

  componentDidMount() {
    // 数据源
    const dataSource = [
      {
        id: '0',
        userName: 'Jack',
        sex: '1',
        state: '1',
        interest: '1',
        birthday: '2000-01-01',
        address: '北京市海淀区奥林匹克公园',
        time: '09:00'
      }, {
        id: '1',
        userName: 'Jack',
        sex: '1',
        state: '1',
        interest: '1',
        birthday: '2000-01-01',
        address: '北京市海淀区奥林匹克公园',
        time: '09:00'
      },
    ];

    this.setState({
      params: 1,
      dataSource: dataSource.map((item, index) => {
        item.key = 'tab' + index;
        return item;
      })
    });

    this._getList()
  }

  /**
   * record: 当前行数据
   */
  onRowClick = (record, index) => {
    // let selectKey = [index];
    let selectKey = record.key;
    Modal.info({
      title: '信息',
      content: `用户名：${record.userName}, 用户爱好：${record.interest}`
    });
    console.log(record);
    console.log(index);
    this.setState({
      selectedRowKeys: selectKey, // 选择的索引
      selectedItem: record, // 选择某一项
    })
  }

  onSelectCheckChange = (selectedRowKeys, selectedRows) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    console.log(selectedRows);
    this.setState({
      selectedRowKeys1: selectedRowKeys,
      selectedRows1: selectedRows
    });
  };

  // 执行多行删除操作
  handleDelete = () => {
    let rows = this.state.selectedRowKeys1;
    let ids = rows.map(item => {
      return item.id
    });
    Modal.confirm({
      title: '删除提示',
      content: '您确定要删除这些数据？' + ids.join(', '),
      onOk: () => {
        message.success('删除成功');
        this._getList()
      }
    })
  }

  _getList() {
    let that = this;
    axios.ajax({
      url: '/table/list',
      data: {
        params: {
          page: this.params.page
        }
      }
    }).then((res) => {
      this.setState({
        dataSource2: res.result.list.map((item, index) => {
          item.key = 'tab' + index;
          return item;
        }),

        selectedRowKeys1: null,
        selectedRows1: null,

        pagination: util.pagination(res, (current) => {
          that.params.page = current;
          that._getList();
        })
      })
    })
  }

  render() {
    const columns = [
      // dataIndex: 索引值，数据源的字段属性值
      { title: 'id', dataIndex: 'id', align: 'left' },
      { title: '用户名', dataIndex: 'userName', align: 'center' },
      { title: '性别', dataIndex: 'sex', render: (sex) => sex === 1 ? '男' : '女' },
      {
        title: '状态', dataIndex: 'state',
        // render 方法默认接收当前字段：表格字典进行映射
        render: (state) => {
          let config = {
            '1': '咸鱼一条',
            '2': '风华浪子',
            '3': '北大才子',
            '4': '百度FE',
            '5': '创业者'
          }
          return config[state];
        }
      },
      {
        title: '爱好', dataIndex: 'interest',
        render(interest) {
          let config = {
            '1': '游泳',
            '2': '打篮球',
            '3': '踢足球',
            '4': '跑步',
            '5': '爬山',
            '6': '骑行',
            '7': '桌球',
            '8': '麦霸'
          }
          return config[interest];
        }
      },
      { title: '生日', dataIndex: 'birthday' },
      { title: '地址', dataIndex: 'address' },
      { title: '早起时间', dataIndex: 'time' },
    ];

    const { selectedRowKeys, selectedRowKeys1 } = this.state;
    const rowSelection = {
      type: 'radio',
      selectedRowKeys,
    }
    const rowCheckSelection = {
      selectedRowKeys: selectedRowKeys1,
      onChange: this.onSelectCheckChange
    }

    return (
      <div>
        <Card title="基础表格">
          <Table
            columns={columns}
            bordered={true}
            dataSource={this.state.dataSource}
            // 是否分页
            pagination={false}
          />
        </Card>

        <Card title="动态数据表格 - Mock" style={{ margin: '10px 0' }}>
          <Table
            columns={columns}
            bordered={true}
            dataSource={this.state.dataSource2}
            // 是否分页
            pagination={false}
          />
        </Card>

        <Card title="Mock 单选" style={{ margin: '10px 0' }}>
          <Table
            rowSelection={rowSelection}
            // 点击行
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.onRowClick(record, index)
                }
              }
            }}
            columns={columns}
            bordered={true}
            dataSource={this.state.dataSource2}
            pagination={false}
          />
        </Card>

        <Card title="Mock 复选" style={{ margin: '10px 0' }}>

          <div style={{ marginBottom: 10 }}>
            <Button onClick={this.handleDelete} >删除</Button>
          </div>

          <Table
            rowSelection={rowCheckSelection}
            columns={columns}
            bordered={true}
            dataSource={this.state.dataSource2}
            pagination={false}
          />
        </Card>

        <Card title="Mock - 表格分页" style={{ margin: '10px 0' }}>
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={this.state.pagination}
          />
        </Card>
      </div>
    )
  }
}
